<template>
    <div class="get_member_page">
        <div class="get_member_bgc">
            <div class="get_member_box" v-if="showPhone">
                <div class="gm_title">请填写手机号领取7天SVIP会员</div>
                <div class="ipt_box" :class="{'err-input': phone.err}">
                    <div class="gm_img_box">
                        <img class="gm_img" src="@/assets/one/ip.png" alt="">
                    </div>
                    
                    <input class="gm_input" type="text" v-model="phone.val" placeholder="请输入注册账户时使用的手机号" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11" @blur="inputBlur()">
                </div>
                <div class="err_text">{{hint}}</div>
                <div class="btn_box">
                    <div class="btn1 btn_pulic" @click="cancel">取消</div>
                    <div class="btn2 btn_pulic" @click="verification">确认</div>
                </div>
            </div>
            <div class="get_member_box" v-if="showPopup==0">
                <div class="gm_title">恭喜您</div>
                <div class="gm_title">已成功领取掌上精选SVIP版会员</div>
                <div class="svip_img_box">
                    <img class="svip_img" src="@/assets/one/receive.png" alt="">
                </div>
                <div class="svip_btn_box">
                    <div class="svip_btn" @click="toPage">点击查看</div>
                </div>
            </div>
            <div class="get_member_box" v-if="showPopup==2">
                <div class="gm_title">您已领取过掌上精选SVIP版会员</div>
                <div class="gm_title">不能再次领取哦～</div>
                <div class="svip_img_box">
                    <img class="svip_img" src="@/assets/one/received.png" alt="">
                </div>
                <div class="svip_btn_box">
                    <div class="svip_btn" @click="toPage">确定</div>
                </div>
            </div>
            <div class="get_member_box" v-if="showPopup==3">
                <div class="gm_title">您当前状态不符合领取条件，</div>
                <div class="gm_title">很遗憾，不能成功领取奖励哦</div>
                <div class="img_err_box">
                    <img class="svip_img" src="@/assets/one/expire.png" alt="">
                </div>
                <div class="svip_btn_box">
                    <div class="svip_btn" @click="toPage">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
    components: {},
    props: {},
    data() {
        return {
            showPopup: 10,
            showPhone: true,
            hintShow: false , //显示提示语
            hint: '',
            phone : {
                val: '',
                err: false,
                pass: false,
                
            }
        };
    },
    watch: {},
    computed: {},
    created() {
        console.log
    },
    mounted() {},
    methods: {
        cancel(){
            var ua = window.navigator.userAgent.toLowerCase(); 
            if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
                // $("#rs").text("微信浏览器");
                wx.closeWindow()
            } else { 
                // $("#rs").text("不是微信浏览器"); 
                this.$router.push('/')
            } 
        },
        inputBlur() {
            let reg = /^1[3|4|5|7|8][0-9]{9}$/
            if(this.phone.val == '' || this.phone.val.length <= 10 || !reg.test(this.phone.val)){
                this.hintShow = true
                this.hint = '请输入正确的手机号'
                this.phone.err = true
                return false
            }
            this.hintShow = false
            this.hint = ''
            this.phone.err = false
            this.phone.pass = true
            return true
        },
        // 确认填写手机号
        verification(){
            if(this.inputBlur()){
                // 手机号验证成功
                this.$axios.post('/api/customer/drawVip',{
                    Mobile: this.phone.val
                }).then((res)=>{
                    console.log(res.data.code)
                    this.showPopup = res.data.code
                    this.showPhone = false

                })
            }else {
                // 手机号验证失败
                console.log('失败')
            }
        },
        toPage(){
            // this.$router.push('/user')
            window.location.pathname="/user"
        //    console.log(window.location) 
        }
    },
};
</script>

<style scoped lang="less">
.get_member_page{
    width: 100%;
    height: 100vh;
    background: url("~@/assets/one/123.png");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
}
.get_member_bgc{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
    padding-top: 5.333333rem;
    box-sizing: border-box;
}
.get_member_box{
    width: 8rem;
    margin: 0 auto;
    padding: .8rem .6rem .666667rem ;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: .133333rem;
    .gm_title{
        width: 100%;
        text-align: center;
        font-size: .453333rem;
        font-weight: 600;
	    color: #333333;
        margin-top: .106667rem;
    }
    .ipt_box{
        width: 100%;
        height: 1.173333rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-top: .666667rem;
        border: 1px solid #e5e5e5;
        .gm_img_box{
            width: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .gm_img{
                width: .293333rem;
                height: .4rem;
            }
        }
        
        .gm_input{
            width: 90%;
            height: 100%;
            border: none;
            font-size: .4rem;
            color: #222;
        }
        .gm_input::placeholder{
            font-size: .4rem;
            color: #888;
        }
    }
    .err-input{
        border-color: #ea1b0b;
        .gm_input{
            color: #ea1b0b;
        }
    }
    .err_text{
        font-size: .32rem;
        margin-top: .133333rem;
        color: #ea1b0b;
        text-align: left;
    }
    .btn_box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: .666667rem;
        .btn_pulic{
            width: 3.2rem;
            height: 1.146667rem;
            line-height: 1.146667rem;
            border-radius: .133333rem;
            box-sizing: border-box;
            text-align: center;
            font-size: .4rem;
        }
        .btn1{
            border: 1px solid #e5e5e5;
            color: #888888;
        }
        .btn2{
            background-color: #fd7f2c;
            color: #ffffff;
        }
    }
    .svip_img_box{
        width: 4.28rem;
        height: 3.346667rem;
        margin: .746667rem auto 0;
        .svip_img{
            width: 100%;
            height: 100%;
        }
    }
    .img_err_box{
        width: 2.666667rem;
        height: 3.333333rem;
        margin: .746667rem auto 0;
        .svip_img{
            width: 100%;
            height: 100%;
        }
    }
    .svip_btn_box{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: .746667rem;
        .svip_btn{
            width: 3.2rem;
            height: 1.146667rem;
            line-height: 1.146667rem;
            font-size: .4rem;
            background-color: #fd7f2c;
            border-radius: .133333rem;
            color: #ffffff;
            text-align: center;
        }
    }
}
</style>
